<template>
	<div class="mainWrapper">
		<el-breadcrumb separator="/">
			<el-breadcrumb-item :to="{ path: '/' }">
				<i class="lh lh-diaodu fw_100"></i>
			</el-breadcrumb-item>
			<el-breadcrumb-item>调度中心</el-breadcrumb-item>
			<el-breadcrumb-item>异常记录</el-breadcrumb-item>
		</el-breadcrumb>

		<div class="content_Box box-shadow">
			<div class="pt_5 px_15">
				<el-row>
					<el-col :span="2">
						<el-button type="default" @click="downloadOrder()" round size="mini">导出</el-button>
					</el-col>
					<el-col :span="22">
						<el-form :inline="true" :model="ruleForm" class="form-inline" @keyup.enter.native="shearchBtn()">
							<el-form-item>
								<el-input size="mini" class="w_110" v-model="s_task_sn" placeholder="任务编号"></el-input>
							</el-form-item>
							<el-form-item>
								<el-input size="mini" class="w_110" v-model="s_demand_sn" placeholder="订单编号"></el-input>
							</el-form-item>
							<el-form-item>
								<el-input size="mini" class="w_80" v-model="s_staff_name" placeholder="接单人"></el-input>
							</el-form-item>
							<el-form-item>
								<el-input size="mini" class="w_110" v-model="s_mobile" placeholder="手机号"></el-input>
							</el-form-item>

							<el-form-item>
								<el-autocomplete
									size="mini"
									class="w_100"
									v-model="s_shop_name"
									:fetch-suggestions="querySearch"
									placeholder="店铺名称"
									:trigger-on-focus="true"
									@select="handleSelect"
								></el-autocomplete>
							</el-form-item>

							<el-form-item>
								<el-select
									size="mini"
									class="w_90"
									v-model="s_area_arr"
									placeholder="商圈"
									@change="changeBtndialogarea"
								>
									<el-option
										v-for="item in areaList"
										:key="item.id"
										:label="item.area_name"
										:value="`${item.id}|${item.area_name}`"
									></el-option>
								</el-select>
							</el-form-item>
							<el-form-item>
								<el-select
									size="mini"
									class="w_90"
									v-model="s_type_arr"
									placeholder="岗位"
									@change="changeBtndialogtype"
								>
									<el-option
										v-for="item in mesarr"
										:key="item.id"
										:label="item.label_name"
										:value="`${item.id}|${item.label_name}`"
									></el-option>
								</el-select>
							</el-form-item>
							<el-form-item>
								<el-select size="mini" class="w_100" v-model="s_type" placeholder="异常状态">
									<el-option label="超时未确认" value="10"></el-option>
									<el-option label="超时未签到" value="11"></el-option>
									<el-option label="超时未分配" value="12"></el-option>
									<el-option label="超时未签退" value="13"></el-option>
									<el-option label="工时异常" value="14"></el-option>
								</el-select>
							</el-form-item>
							<el-form-item>
								<el-select size="mini" class="w_90" v-model="s_time_type" placeholder="时间类型">
									<el-option label="创建时间" value="1"></el-option>
									<el-option label="处理时间" value="2"></el-option>
									<el-option label="任务开始时间" value="3"></el-option>
								</el-select>
							</el-form-item>
							<el-form-item prop="date1">
								<el-date-picker
									size="mini"
									type="datetime"
									class="w_120i"
									value-format="yyyy-MM-dd HH:mm:ss"
									format="MM-dd HH:mm"
									placeholder="开始时间"
									v-model="ruleForm.date1"
								></el-date-picker> </el-form-item
							>~
							<el-form-item prop="date2">
								<el-date-picker
									size="mini"
									type="datetime"
									class="w_120i"
									value-format="yyyy-MM-dd HH:mm:ss"
									format="MM-dd HH:mm"
									placeholder="结束时间"
									v-model="ruleForm.date2"
								></el-date-picker>
							</el-form-item>

							<el-button size="mini" type="primary" class="round-right" native-type="button" @click="shearchBtn"
								>搜索</el-button
							>
							<el-button size="mini" round @click="resetBtn">重置</el-button>
						</el-form>
					</el-col>
				</el-row>
			</div>

			<div class="tableMaxBox">
				<template>
					<el-table :data="demandList" stripe ref="multipleTable" :show-overflow-tooltip="false">
						<el-table-column prop="abnormal_sn" label="异常编号" width="130px">
							<template slot-scope="{ row }">
								<span type="primary">{{ row.abnormal_sn }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="task_sn" label="任务编号" width="130px">
							<template slot-scope="{ row }">
								<span class="u text-primary pointer" @click="goToMorerw(row)">{{ row.task_sn }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="total" label="接单人" width="160">
							<template slot-scope="{ row }">
								<span class="text-success">{{ row.task_staff_name }} {{ row.task_staff_mobile }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="shop_name" label="店铺名称" min-width="150">
							<template slot-scope="{ row }">
								<span type="primary">{{ row.task_shop_name }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="sn" label="订单编号" width="110">
							<template slot-scope="{ row }">
								<span class="u text-primary pointer" @click="goToMoreXq(row)">{{ row.task_demand_sn }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="area_name" label="商圈" min-with="60"></el-table-column>
						<el-table-column prop="label_name" label="任务名称" min-width="100">
							<template slot-scope="{ row }">
								<span type="primary">{{ row.task_job_name }} {{ row.task_hour_expect }}h</span>
							</template>
						</el-table-column>
						<el-table-column prop="demand_period" label="需求周期D" width="90" align="center"></el-table-column>
						<el-table-column prop="abnormal_status" label="处理状态" width="90">
							<template slot-scope="{ row }">
								<span class="text-warning">{{ row.abnormal_status }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="abnormal_type_name" label="异常状态" width="100">
							<template slot-scope="{ row }">
								<span class="text-danger">{{ row.abnormal_type_name }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="start_date" label="任务开始/结束时间" width="180px">
							<template slot-scope="{ row }">
								<span>{{ row.start_date }} {{ row.start_time }}~{{ row.end_time }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="abnormal_add_time" label="创建时间" width="160px"></el-table-column>
						<el-table-column prop="abnormal_handle_time" label="处理时间" width="160px"></el-table-column>
						<el-table-column prop="abnormal_handler_name" label="处理人" width="120px"></el-table-column>
					</el-table>
					<page :total="total" :pageNums="pageNum" class="fr" @pagedata="onChildValue"></page>
				</template>
			</div>
		</div>
	</div>
</template>

<script>
var common = require('../../../static/tool.js')

import { fetchShopList, fetchAreaList, fetchLabelList } from '@/api/shop.js'
import { taskAbnormalList } from '@/api/task.js'
export default {
	name: 'ShopList',
	data() {
		return {
			index: '10',
			windowSizeHeight: document.documentElement.clientHeight, //浏览器可视化窗口的大小
			screenHeight: document.documentElement.clientHeight,
			manageInfo: JSON.parse(sessionStorage.getItem('manageInfo')), //登录信息
			url: common.url,
			areaList: [], //区域列表
			//搜索对应值
			s_task_sn: '', //任务编号
			s_demand_sn: '', //订单编号
			s_staff_name: '', //接单人
			s_mobile: '', //手机号
			s_area_arr: '', //商圈信息
			s_area_id: '',
			s_area_name: '',
			s_type_arr: '', //需求信息
			s_label_id: '',
			s_label_name: '',
			s_type: '',
			s_shop_id: '', //店铺id
			s_shop_name: '', //店铺名
			s_time_type: '1', //时间类型选择
			ruleForm: {
				date1: '', //开始时间
				date2: '' //结束时间
			},

			demandList: [], //任务列表
			centerLists: [], //全景调度列表
			mesarr: [], //任务标签列表
			//向分页组件传值
			total: 0,
			pageNum: '',
			pageSizeNow: ''
		}
	},
	created() {
		var d = this.date(-4)
		this.ruleForm.date1 = d + ' 00:00:00'
		var e = this.date(3)
		this.ruleForm.date2 = e + ' 23:59:00'
	},
	mounted() {
		this.getShopList() //店铺列表
		this.getAreList() //区域列表
		this.alljob_type() // 获取岗位
	},
	methods: {
		date(e) {
			return this.$moment().add('days', e).format('YYYY-MM-DD')
		},

		// 获取店铺列表
		async getShopList() {
			try {
				let ret = await fetchShopList({
					sign_status: 30, // 已合作的店铺
					status: 1 // 启用的店铺
					// search_list: 1   //  不进行分页
				})
				ret.list.forEach(item => {
					item.value = item.name
				})
				this.shopList = ret.list
			} catch (error) {
				console.log('error:', error)
			}
		},
		// 获取任务列表
		async listShop() {
			if (this.ruleForm.date1 == null || this.ruleForm.date1 == '') {
				this.$message.error('请选择开始时间')
				return
			}
			if (this.ruleForm.date2 == null || this.ruleForm.date2 == '') {
				this.$message.error('请选择开始时间')
				return
			}
			try {
				let ret = await taskAbnormalList({
					task_sn: this.s_task_sn,
					demand_sn: this.s_demand_sn,
					staff_name: this.s_staff_name,
					mobile: this.s_mobile,
					shop_id: this.s_shop_id,
					area_id: this.s_area_id,
					type: this.s_type,
					job_type: this.s_label_id,
					time_type: this.s_time_type,
					start_time: this.ruleForm.date1,
					end_time: this.ruleForm.date2,
					pageSize: this.pageSizeNow,
					page: this.pageNum
				})
				if (ret.list.length) {
					this.demandList = ret.list
					this.total = ret.count
				} else {
					this.demandList = []
					this.total = 0
				}
			} catch (error) {
				console.log('error', error)
			}
		},

		shearchBtn() {
			// 搜索
			this.pageNum = 1
			this.listShop()
		},

		resetBtn() {
			//重置
			this.resetData() //重置请求数据
			this.pageNum = 1
			this.listShop()
		},

		resetData() {
			//重置请求数据
			this.pageNum = 1
			this.s_task_sn = ''
			this.s_demand_sn = ''
			this.s_staff_name = ''
			this.s_mobile = ''
			this.s_type = ''
			this.s_type_arr = ''
			this.s_label_id = ''
			this.s_label_name = ''
			this.s_area_arr = ''
			this.s_area_id = ''
			this.s_area_name = ''
			this.s_shop_id = ''
			this.s_shop_name = ''
			this.s_time_type = '1'
			// this.ruleForm.date1 = "";
			// this.ruleForm.date2 = "";
		},

		//店铺的自动完成
		querySearch(queryString, cb) {
			var restaurants = this.shopList
			var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
			// 调用 callback 返回建议列表的数据
			cb(results)
		},
		createFilter(queryString) {
			return restaurant => {
				return restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
			}
		},
		handleSelect(item) {
			this.s_shop_id = item.id
		},

		//分页组件->子组件传值
		onChildValue(item) {
			this.pageNum = item[0]
			this.pageSizeNow = item[1]
			this.listShop()
		},
		changeBtndialogarea() {
			let [id, name] = this.s_area_arr.split('|') // es6 数组解构赋值
			this.s_area_id = id.toString()
			this.s_area_name = name.toString()
		},

		//获取商圈列表
		async getAreList() {
			try {
				let ret = await fetchAreaList()
				ret.list.forEach(item => {
					item.value = item.area_name
				})
				this.areaList = ret.list
			} catch (error) {
				console.log('error:', error)
			}
		},

		changeBtndialogtype() {
			let [id, name] = this.s_type_arr.split('|') // es6 数组解构赋值
			this.s_label_id = id.toString()
			this.s_label_name = name.toString()
		},

		//标签接口
		async alljob_type() {
			try {
				let ret = await fetchLabelList({
					label_type: 'job_type'
				})
				this.mesarr = ret
			} catch (error) {
				console.log('error:', error)
			}
		},
		//跳转任务详情
		goToMorerw(row) {
			const { href } = this.$router.resolve({
				path: '/roleMain',
				query: { rl_id: '', rl_sn: row.task_demand_sn, task_id: '', task_sn: row.task_sn, start_date: row.start_date }
			})
			window.open(href, '_blank')
		},
		//跳转订单详情
		goToMoreXq(row) {
			// console.log(row);
			const { href } = this.$router.resolve({
				path: '/roleMainXq',
				query: { rl_id: '', rl_sn: row.task_demand_sn, start_date: row.start_date }
			})
			window.open(href, '_blank')
		},
		downloadOrder() {
			//人才扣罚列表-导出
			var ruleForm_date1 = ''
			var ruleForm_date2 = ''
			if (this.ruleForm.date1 != '' && this.ruleForm.date2 != '') {
				//开始时间与结束时间必须同时存在
				ruleForm_date1 = this.ruleForm.date1
				ruleForm_date2 = this.ruleForm.date2
			}
			let obj = {
				token: JSON.parse(sessionStorage.getItem('manageInfo')).token,
				task_sn: this.s_task_sn,
				demand_sn: this.s_demand_sn,
				staff_name: this.s_staff_name,
				mobile: this.s_mobile,
				shop_id: this.s_shop_id,
				area_id: this.s_area_id,
				type: this.s_type,
				job_type: this.s_label_id,
				time_type: this.s_time_type,
				start_time: this.ruleForm.date1,
				end_time: this.ruleForm.date2
			}
			let param = $.param(obj)
			window.location.href = this.url + '/abnormal/exportAbnormalList?' + param
		}
	},
	filters: {
		ReversalTime: function (value) {
			value = value % 24
			return common.getReversalTime(value)
		}
	}
}
</script>

<style scoped>
@import '../../assets/style/abnormalList.css';
</style>



// WEBPACK FOOTER //
// src/components/abnormal/AbnormalList.vue